<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div>
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入名称" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item>
              <a-button type="primary" @click="searchQuery()" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <a-spin size="large" :spinning="loading">
        <a-row type="flex" justify="start" :gutter="[16, 16]" class="!m-0" v-if="dataSource.length >0">
          <template v-for="(item) in dataSource">
            <a-col :span="6" :key="item.code">
              <a-card size="small" hoverable  @click="handleStart(item)">
                <template slot="title" >
                  <h1 class="font-bold">{{item.name}}</h1>
                </template>
                <BpmnViewer :xml="item.xml" height="100%"  />
                <a-card-meta :title="item.name" :description="'创建人：'+item.textMap.createBy$DICT_TEXT_"></a-card-meta>
              </a-card>
            </a-col>
          </template>
        </a-row>
        <a-empty v-else />
        <div class="mt-4">
          <a-pagination
            show-size-changer
            v-bind="ipagination"
            @change="handlePageChange"
            :show-total="total => `共 ${total} 条`"
          />
        </div>
      </a-spin>
    </div>
    <ProcessStartModal @ok="modalFormOk" ref="modalForm" />
  </a-card>
</template>

<script>
import Criteria from '@/utils/criteria'
import { OPERATOR } from '@/store/mutation-types'
import { getAction } from '@/services/manage'
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import ProcessStartModal from './modules/ProcessStartModal'
import { Pagination as APagination } from 'ant-design-vue'
import BpmnViewer from '@/components/bpmn/bpmnViewer'
export default {
  name: 'ProcessList',
  components: {
    ProcessStartModal,
    APagination,
    BpmnViewer
  },
  mixins: [VxeTableListMixin],
  data() {
    return {
      queryParam: {},
      url: {
        list: '/camunda/flow/page'
      },
      filters: {
        'status@IN': '02,03',
        'visible@EQ': true
      },
      toolbarConfig: {
        buttons: [],
        import: false
      },
      dataSource: [],
      ipagination: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      loading: false
    }
  },
  methods: {
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.currentPage = 1
      }
      var params = this.getQueryParams()// 查询条件
      this.loading = true
      return getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.content || res.result
          this.ipagination.total = res.result.totalElements
        }
      }).finally(() => {
        this.loading = false
      })
    },
    getQueryParams() {
      // 获取查询条件
      const queryParam = new Criteria()
      queryParam.addCriterions(Object.assign({}, this.queryParam, this.filters), OPERATOR.LIKE_START)// 过滤参数转换为jpa支持格式
      if (this.superQueryParams) {
        queryParam.concatCriterions(this.superQueryParams)
      }
      this.isorter && queryParam.addOrder(this.isorter)// 增加排序规则
      var param = Object.assign({}, { criteria: queryParam.getEncode() })
      param.pageNo = this.ipagination.currentPage
      param.pageSize = this.ipagination.pageSize
      return param
    },
    handlePageChange(currentPage, pageSize) {
      this.ipagination.currentPage = currentPage
      this.ipagination.pageSize = pageSize
      this.loadData()
    },
    handleStart(row) {
      this.$refs.modalForm.show(row)
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>

